<template>
  <div class="rank-page c-p c-flex-column">
    <div @click="showRuleIntro = true" class="rules-entry c-fs22 c-fc-white">查看规则</div>
    <div class="c-bg-white c-ml30 c-mr30 c-flex-1 c-text-hidden c-flex-column c-br-tl20 c-br-tr20">
      <div class="c-flex-row c-justify-center c-flex-shrink0">
        <ul class="tab-list c-mt20 c-flex-row c-justify-center c-alignc-sb c-bg-f2 c-hh56 c-fc-xblack c-liststyle-none c-fs22 c-br30">
          <li v-for="(item, index) in tabList" @click="changeTab(index)" :key="index" class="c-flex-row c-justify-center c-aligni-center" :class="tabIndex==index ? 'active c-fc-orange c-fw500' :''">{{item.tit}}</li>
        </ul>
      </div>
      <div v-if="tabIndex==0" class="c-flex-row c-justify-sb c-ml20 c-mr20 c-mt30 c-flex-shrink0">
        <div class="c-fs26 c-fc-xblack c-fw600 before-line">{{weekRangeType==1 ?'本周排行榜':'上周排行榜'}}</div>
        <div @click="switchWeekRange" class="c-fc-gray c-fs22 c-flex-row c-aligni-center"><span class="iconfont">&#xe6f1;</span>{{weekRangeType == 1 ? '切换至上周':'切换至当前'}}</div>
      </div>
      <ul v-if="rankList.length" class="c-liststyle-none c-flex-row c-aligni-center c-fs22 c-fc-gray c-mt30 c-pb10 tbl-head c-flex-shrink0">
        <li class="cell-1">排名</li>
        <li class="c-flex-1 c-pl100">成员</li>
        <li class="cell-3">{{customPointName}}值</li>
      </ul>
      <div class="c-content-scroll c-flex-1 c-pb20" id="J_ranklist-scroll" @scroll="rankListScroll">
        <ul v-if="rankList.length" class="c-liststyle-none tbl-body">
          <li v-for="(item,index) in rankList" :key="index" class="c-flex-row c-aligni-center c-pt16 c-pb16">
            <div class="cell-1"><span class="num">{{index + 1}}</span></div>
            <div class="c-flex-1 c-flex-row c-aligni-center c-text-hidden c-pl10">
              <div class="c-ww72 c-hh72 c-br50 c-text-hidden c-mr16 c-flex-shrink0">
                <img class="c-w100 c-h" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" />
              </div>
              <div class="c-fs26 c-fc-xblack c-text-ellipsis1">{{item.nickName}}</div>
            </div>
            <div class="cell-3 c-fs26 c-fw600 c-fc-orange">{{item.sp}}</div>
          </li>
        </ul>
        <loading-status-tem :dataStatus="dataStatus" showNoneTemplate="true"
          noneImage="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/circle/integral_rank_none.png" noDataText="还没有人上榜哦"
          class="c-bg-white">
          <div @click="inviteFriends" class="c-bg-mb1-orange c-fs22 c-fc-white c-ww180 c-hh48 c-lh48 c-br32 c-mlr-auto c-mt20">立即分享</div>
        </loading-status-tem>
      </div>
    </div>
    <!-- <div class="c-pf c-p-l0 c-p-r0 c-p-b0 c-bg-white c-hh96 c-flex-row c-aligni-center c-pl64 c-pr20">
      <div class="c-fs24 c-fc-gray c-flex-row c-aligni-center c-justify-center c-ww50 c-ml44">1</div>
      <div class="c-flex-1 c-flex-row c-aligni-center c-text-hidden c-pl24">
        <div class="c-ww72 c-hh72 c-br50 c-text-hidden c-mr16">
          <img class="c-w100 c-h" src="https://knowledge-payment.oss-cn-beijing.aliyuncs.com/13/forms/2023-03-29/AtxtzekObX6FiW3hzeXByFMLsau6Fqfgy0VRISsT.png?x-oss-process=style/common" />
        </div>
        <div>
          <div class="c-fs26 c-fc-xblack c-text-ellipsis1">都学都学都学都学</div>
          <div class="c-fs22 c-fc-gray">积分值 <span class="c-fc-orange c-fs26">12</span></div>
        </div>
      </div>
      <div class="c-bg-mb1-orange c-fc-white c-ww122 c-hh48 c-fs22 c-textAlign-c c-br32 c-flex-row c-aligni-center c-justify-center">冲榜</div>
    </div> -->
    <!-- 规则介绍 -->
    <open-modal :openModal='showRuleIntro' @closeModal='showRuleIntro = false'>
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-pl40 c-pr40 c-pb40 c-p">
        <div @click="goToIntegralDetail" class="c-fs28 c-fw500 c-fc-xblack c-textAlign-c c-pt34 c-pb20">{{ customPointName }}规则</div>
        <div v-if="!$isStore()" class="c-fs22 c-fc-orange c-pa c-p-r0 c-p-t40 c-ph20">获取明细</div>
        <div class="c-contexty-scroll c-maxh600">
          <div class="c-fs24 c-fc-xblack c-lh50">
            <p>1、若中途退出或被移出圈子，你的{{customPointName}}值将暂时冻 结，重新加入圈子后恢复记录</p>
            <p>2、{{customPointName}}值在成员完成成长任务后自动发放，超过每日上限次数后，对应成长任务，在当天不再发放{{customPointName}}</p>
            <p>3、删除评论或取消点赞，对应的成{{customPointName}}将被收回</p>
          </div>
          <ul class="c-liststyle-none c-flex-row c-aligni-center c-justify-sb c-hh68 c-fc-xblack c-fs24 c-pl20 c-pr20 c-mt30 rule-tbl-head">
            <li class="c-ww180">成长任务</li>
            <li class="c-flex-1 c-textAlign-c">每日上限</li>
            <li class="c-ww180 c-textAlign-r">获得{{ customPointName }}</li>
          </ul>
          <ul class="c-liststyle-none c-fc-xblack c-pl20 c-pr20 rule-tbl-body">
            <li v-for="(item,index) in ruleInfo" :key="index" class="c-flex-row c-aligni-center c-justify-sb c-hh68 c-fs24 ">
              <div class="c-ww180">{{item.title}}</div>
              <div class="c-flex-1 c-textAlign-c">{{item.limit}}</div>
              <div class="c-fw600 c-fc-orange c-ww180 c-textAlign-r">{{ item.points}}</div>
            </li>
          </ul>
        </div>
      </div>
    </open-modal>
  </div>
</template>
<script>
const LIMIT = 10;
import OpenModal from "@/components/templates/common/openModal.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
export default {
  name: 'circleIntegralRank',
  components: {
    OpenModal,
    loadingStatusTem
  },
  data() {
    return {
      tabList: [{
        tit: "周榜",
        type: 3
      }, {
        tit: "月榜",
        type: 4
      }, {
        tit: "总榜",
        type: 1
      }],
      tabIndex: 0,
      showRuleIntro: false,
      rankList: [],
      weekRangeType: 1, //1本周 2上一周
      dataStatus: 'HAS_MORE_DATA',
      ruleInfo: [], //积分规则
      customPointName: localStorage.getItem("customPointName"),
    }
  },
  created() {
    this._circleId = this.$route.query.id;
    this._page = 1;
    this._getRankList();
    this._getRulesInfo();
  },
  methods: {
    changeTab(index) {
      if (index == this.tabIndex) return;
      this.tabIndex = index;
      this._page = 1;
      this.weekRangeType = 1;
      this.rankList = [];
      this._getRankList();
    },
    rankListScroll() {
      let element = document.getElementById('J_ranklist-scroll');
      utilJs.elementLoading(element, () => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.rankList.length > 0) {
          this._getRankList();
        }
      })
    },
    switchWeekRange() {
      this.weekRangeType = this.weekRangeType == 1 ? 2 : 1;
      this._getRankList();
    },
    _getRulesInfo() {
      utilJs.getMethod(`${global.apiurl}circle/getCirclePointsRule/${this._circleId}`, res => {
        res.forEach(item => {
          let title = '';
          switch (item.type) {
            case 1:
              title = '邀请新成员';
              break;
            case 2:
              title = '动态获精选';
              break;
            case 3:
              title = '动态获他人点赞';
              break;
            case 4:
              title = '动态获他人评论';
              break;
            case 5:
              title = '发布评论';
              break;
            case 6:
              title = '点赞动态';
              break;
            case 7:
              title = '发布动态';
              break;
            default:
              title = '';
          }
          item.title = title;
        })
        this.ruleInfo = res;
      })
    },
    // 进入圈子
    redirectCircleFeed() {
      this.$routerGo(this, "replace", {
        path: "/homePage/circle/circleFeed",
        query: {
          id: this._circleId
        }
      })
    },
    //跳转积分详情
    goToIntegralDetail() {
      this.$routerGo(this, "push", { path: "/member/myIntegral/integralDetail" });
    },
    // 邀请好友
    inviteFriends: function () {
      let ckFrom = global.ckFrom.circle;
      let extId = this._circleId;
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: { cId: 0, extId: extId, ckFrom: ckFrom }
      });
    },
    //获取积分列表
    _getRankList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let timeType = this.weekRangeType == 2 ? this.weekRangeType : this.tabList[this.tabIndex].type;
      let url = `${global.apiurl}circle/getPointsRankList/${this._circleId}?timeType=${timeType}&page=${this._page}&limit=${LIMIT}`;
      utilJs.getMethod(url, res => {
        if (this._page == 1) {
          this.rankList = res.data;
        } else {
          this.rankList = [...this.rankList, ...res.data];
        }
        if (res.total * 1 == this.rankList.length) {
          this.dataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          this._page++;
        }
      }, () => {
        this.dataStatus = "DATA_ERROR";
        this.redirectCircleFeed();
      })
    }
  }
}
</script>
<style scoped lang="scss">
.tbl-head,
.tbl-body {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  .cell-1 {
    width: 2rem;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
  }
  .cell-3 {
    width: 3.75rem;
    text-align: right;
    flex-shrink: 0;
  }
}
.rank-page {
  height: 100%;
  background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/circle/integral_rank_bg.png")
    no-repeat top center;
  background-size: 100% auto;
  padding: 7.35rem 0 0;
  // box-sizing: border-box;
  // overflow: hidden;
}
.rules-entry {
  position: absolute;
  right: 0;
  top: 0.75rem;
  background: #ffffff1a;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-radius: 0.5rem 0 0 0.5rem;
  width: 3.2rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
}
.tab-list {
  padding: 0.15rem;
  li {
    width: 3rem;
    height: 1.1rem;
    &.active {
      background: #fff;
      border-radius: 0.75rem;
    }
  }
}
.before-line {
  position: relative;
  padding: 0 0 0 0.5rem;
  &:before {
    content: "";
    width: 0.1rem;
    height: 0.5rem;
    background: #ff7100;
    position: absolute;
    left: 0;
    top: 50%;
    border-radius: .1rem;
    transform: translate(0, -50%);
  }
}
.tbl-body {
  li {
    .num {
      font-size: 0.65rem;
      color: #999999;
    }
    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      .num {
        width: 0.8rem;
        height: 0.8rem;
        text-indent: -9999px;
        background-repeat: no-repeat;
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
    &:nth-child(1) {
      .num {
        background-image: url("../../../assets/i/wap/circle/rank_sort_1.png");
      }
    }
    &:nth-child(2) {
      .num {
        background-image: url("../../../assets/i/wap/circle/rank_sort_2.png");
      }
    }
    &:nth-child(3) {
      .num {
        background-image: url("../../../assets/i/wap/circle/rank_sort_3.png");
      }
    }
  }
}
.rule-tbl-head {
  background: #fff0e5;
}

.rule-tbl-body {
  background: #fafafa;
}
</style>
